<template>
  <n-card :bordered="false" content-style="padding: 0">
    <n-form label-placement="left" :show-feedback="false">
      <n-grid :cols="4" x-gap="15">
        <n-form-item-grid-item label="主键">
          <n-input v-model:value="form.id" />
        </n-form-item-grid-item>
        <n-form-item-grid-item label="字典">
          <n-input v-model:value="form.code" />
        </n-form-item-grid-item>
        <n-form-item-grid-item label="名称">
          <n-input v-model:value="form.name" />
        </n-form-item-grid-item>
        <n-form-item-grid-item label="状态">
          <n-select v-model:value="form.status" :options="codeStore.getCodesByDict(_Dict.Status)" />
        </n-form-item-grid-item>
      </n-grid>
    </n-form>

    <n-card
      :bordered="false"
      content-style="padding: 15px 0; display: flex; justify-content: space-between;"
    >
      <n-space>
        <n-button type="info" @click="handleDictInsertOnClick">新增</n-button>
      </n-space>
      <n-space>
        <n-button type="info" @click="handleSelectOnClick">查询</n-button>
        <n-button type="info" @click="handleReset(form)">重置</n-button>
        <n-tooltip placement="bottom">
          <template #trigger>
            <n-icon size="28">
              <Settings />
            </n-icon>
          </template>
          列设置
        </n-tooltip>
      </n-space>
    </n-card>

    <n-data-table
      table-layout="fixed"
      :row-key="(row: SystemCodeTableData) => row.id"
      :bordered="false"
      :loading="loading"
      :columns="columns"
      :data="records"
      @load="onLoad"
      :pagination="pagination"
    />

    <DictModal
      :show="DictModalData.show"
      :po="DictModalData.po"
      @handleSelectOnClick="handleSelectOnClick"
      @handleCloseOnClick="handleDictCloseOnClick"
    />

    <CodeModal
      :show="CodeModalData.show"
      :po="CodeModalData.po"
      :dict="CodeModalData.dict"
      @handleSelectOnClick="handleSelectOnClick"
      @handleCloseOnClick="handleCodeCloseOnClick"
    />
  </n-card>
</template>
<script lang="ts" setup>
import { Settings } from '@vicons/carbon'
import { basicColumns } from './columns'
import { usePagination } from '@/hooks/usePagination'
import { getDictPage, deleteDict } from '@/api/system/Dict'
import { getCodeListByDictId, deleteCode } from '@/api/system/Code'
import DictModal from './modal/DictModal.vue'
import CodeModal from './modal/CodeModal.vue'

const codeStore = useCodeStore()

const handleSelectOnClick = async () => {
  state.loading = true
  const { data } = await getDictPage(state.pagination, state.form)
  state.records = data.records.map(
    (ele) =>
      ({
        ...ele,
        isLeaf: false
      }) as SystemDictVO
  )
  state.loading = false
}

onMounted(() => {
  handleSelectOnClick()
})

const state = reactive({
  loading: false,
  pagination: usePagination(handleSelectOnClick),
  records: [] as SystemCodeTableData[],
  form: {} as SystemDictPO,
  CodeModalData: {
    show: false,
    po: {} as SystemCodePO,
    dict: {} as SystemDictPO
  },
  DictModalData: {
    show: false,
    po: {} as SystemDictPO
  }
})

const { loading, form, pagination, records, CodeModalData, DictModalData } = toRefs(state)

const columns: ComputedRef<DataTableColumns<SystemCodeTableData>> = computed(() => {
  const buttons = [
    { label: '新增', onClick: handleCodeInsertOnClick },
    { label: '修改', onClick: handleDictUpdateOnClick },
    { label: '删除', onClick: handleDictDeleteOnClick }
  ]
  const leafButtons = [
    { label: '修改', onClick: handleCodeUpdateOnClick },
    { label: '删除', onClick: handleCodeDeleteOnClick }
  ]
  return [
    ...basicColumns,
    {
      title: '操作',
      key: 'actions',
      width: 250,
      render(row) {
        return !row.isLeaf
          ? createTableButtons<SystemDictVO>(buttons, row as SystemDictVO)
          : createTableButtons<SystemCodeVO>(leafButtons, row as SystemCodeVO)
      }
    }
  ]
})

const onLoad = async (row: Record<string, any>) => {
  const { data } = await getCodeListByDictId(row.id)
  row.children = data.map((ele) => ({ ...ele, isLeaf: true }))
}

const handleDictInsertOnClick = () => {
  state.DictModalData.po = {} as SystemDictPO
  state.DictModalData.show = true
}

const handleDictUpdateOnClick = (row: SystemDictVO) => {
  state.DictModalData.show = true
  state.DictModalData.po = row
}

const handleDictDeleteOnClick = (row: SystemDictVO) => {
  IConfirmMessage({
    content: '确认删除？',
    onPositiveClick: async () => {
      await deleteDict(row.id)
      handleSelectOnClick()
    }
  })
}

const handleCodeInsertOnClick = (row: SystemDictVO) => {
  state.CodeModalData.show = true
  state.CodeModalData.po = {} as SystemCodePO
  state.CodeModalData.dict = row
}

const handleCodeUpdateOnClick = (row: SystemCodeVO) => {
  state.CodeModalData.show = true
  state.CodeModalData.po = row
  state.CodeModalData.dict = state.records.filter((ele) => ele.id === row.dictId)[0] as SystemDictPO
}

const handleCodeDeleteOnClick = (row: SystemCodeVO) => {
  IConfirmMessage({
    content: '确认删除？',
    onPositiveClick: async () => {
      await deleteCode(row.id)
      handleSelectOnClick()
    }
  })
}

const handleCodeCloseOnClick = () => {
  state.CodeModalData.show = false
}

const handleDictCloseOnClick = () => {
  state.DictModalData.show = false
}
</script>
